{{define "main1.html"}}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>郑州第一人民医院脑卒中危险因素筛查系统</title>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        {{template "include/styleRefer.html"}}
        {{template "include/scriptRefer.html"}}

        <script src="/res/bower_components/fastclick/lib/fastclick.js"></script>
        <!--<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>-->
        <script src="/res/js/echarts.js"></script>
    </head>
    <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        {{template "mainHeader.html"}}
        {{template "nav.html"}}
        <div class="content-wrapper">
            {{template "contentHeader.html"}}
            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                                <h3 class="box-title">{{.areaName}}筛查统计数据</h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="col-lg-3 col-xs-6">
                                    <!-- small box -->
                                    <div class="small-box bg-aqua">
                                        <div class="inner">
                                            <h3>{{.current}}</h3>

                                            <p>当前已采集数量</p>
                                        </div>
                                        <div class="icon">
                                            <i class="ion ion-bag"></i>
                                        </div>
                                        <a href="#" class="small-box-footer">总量 :{{.total}}</a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-xs-6">
                                    <!-- small box -->
                                    <div class="small-box bg-green">
                                        <div class="inner">
                                            <h3 id="percent"><sup style="font-size: 20px">%</sup></h3>

                                            <p>采集人数占比</p>
                                        </div>
                                        <div class="icon">
                                            <i class="ion ion-stats-bars"></i>
                                        </div>
                                        <a href="#" class="small-box-footer">&nbsp;</a>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="col-xs-6">
                        <div class="box box-danger">
                            <div class="box-header with-border">
                                <h3 class="box-title">危险因素</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                                class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                                class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <div class="box-body">
                                <div id="weixianyinsu_chart" style="width: 100%;height:400px;"></div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="box box-danger">
                            <div class="box-header with-border">
                                <h3 class="box-title">风险分级</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                                class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                                class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <div class="box-body">
                                <div id="weixianfenji_renshu_chart" style="width: 100%;height:400px;"></div>
                                <div id="weixianfenji_zhanbi_chart" style="width: 100%;height:300px;"></div>

                            </div>
                            <!-- /.box-body -->
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('weixianfenji_renshu_chart'));
        let myChart2 = echarts.init(document.getElementById('weixianyinsu_chart'));
        let myChart3 = echarts.init(document.getElementById('weixianfenji_zhanbi_chart'));
        // 指定图表的配置项和数据
        let option = {
            color: ['#b93230'],
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data: ['人数统计']
            },
            xAxis: {
                data: ["高危", "中危", "低危"],
                minInterval: 1,
                maxInterval: 20
            },
            yAxis: {
                name: "",
            },
            series: [{
                name: '人数',
                type: 'bar',
                barWidth: '20%',
                label: {show: true},
                data: []
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        let option2 = {
            title: {
                text: '危险因素构成',
                subtext: '百分比(%)',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['高血压', '血脂异常', '糖尿病', '房颤或瓣膜性心脏病', '吸烟', '明显超重或肥胖', '运动缺乏', '脑卒中家族史']
            },
            //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            series: [
                {
                    name: '危险因素构成',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart2.setOption(option2);


        let option3 = {
            title: {
                text: '风险分级占比',
                subtext: '百分比(%)',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['高危', '中危', '低危']
            },
            //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            series: [
                {
                    name: '风险分级占比(%)',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart3.setOption(option3);

        let high ={{.high}};
        let middle ={{.middle}};
        let low ={{.low}};
        let total ={{.total}};
        let current ={{.current}};
        let area={{.area}};
        $("#percent").html(GetPercent2(current,total)+"<sup style='font-size: 20px'>%</sup>");
        myChart.setOption(
            {
                series: [{
                    data: [high, middle, low]
                }]
            }
        );
        myChart3.setOption(
            {
                series: [{
                    data: [{name: "高危", value: high}, {name: "中危", value: middle}, {name: "低危", value: low}]
                }]
            }
        );
        ajaxLoading("正在获取统计数据....");
        $.post("/system/wxysQuery", {area:area}, function (resp) {
            ajaxLoadEnd();
            console.log("wxysQuery result:", resp);
            myChart2.setOption(
                {
                    series: [{
                        data: [{name: "高血压", value: resp.gaoxueya},
                            {name: "血脂异常", value: resp.xzyc},
                            {name: "糖尿病", value: resp.tnb},
                            {name: "房颤或瓣膜性心脏病", value: resp.fc},
                            {name: "吸烟", value: resp.xiyan},
                            {name: "明显超重或肥胖", value: resp.chaozhong},
                            {name: "运动缺乏", value: resp.yundong},
                            {name: "脑卒中家族史", value: resp.naocuzhong_family_history}]
                    }]
                }
            );
        }, 'json');
    </script>
    </body>
    </html>
{{end}}